<template>
  <div class="container">
    <el-row>
      <el-col class="topTitle">
        <el-col :span="17"
          ><div class="leftBox">
            <div>
              <i class="icon iconfont iconfanhui1" @click="goBack"></i
              >2019年湖北省对地级市的第四季度考核
            </div>
            <div class="explain">
              考核周期：2019年10月-2019年12月 被考核地区：荆门市
              <span>还剩<b>23天</b>截止，截止后，将无法再自评举证</span>
            </div>
          </div></el-col
        >
        <el-col :span="7">
          <div class="rightBox">
            <el-row type="flex" justify="end">
              <el-col :span="12"
                ><div class="totalScore">
                  <h3>总分</h3>
                  <p class="mainColor">100分</p>
                </div></el-col
              >
              <el-col :span="12"
                ><div class="selfScore">
                  <h3>自评分</h3>
                  <p class="mainColor">80分</p>
                </div></el-col
              >
            </el-row>
          </div></el-col
        >
      </el-col>
    </el-row>
    <div class="mainCon">
      <el-row type="flex">
        <el-col :xl="4" :lg="6" :md="8" :sm="17" class="checkItems">
          <el-row>
            <el-col :span="6">考核项</el-col>
            <el-col :span="6" :offset="11"
              >还剩<b :style="{ color: '#ff0000' }">8</b>项</el-col
            >
          </el-row>
          <el-row class="itemBox">
            <el-col :span="24">
              <el-col :span="6">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="第一项"
                  placement="top-start"
                >
                  <el-button size="mini" class="itemBtn">1</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="第二项"
                  placement="top-start"
                >
                  <el-button size="mini" class="itemBtn">2</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="第三项"
                  placement="top-start"
                >
                  <el-button size="mini" class="itemBtn">3</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="第四项"
                  placement="top-start"
                >
                  <el-button size="mini" class="itemBtn">4</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="第五项"
                  placement="top-start"
                >
                  <el-button size="mini" class="itemBtn">5</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="第六项"
                  placement="top-start"
                >
                  <el-button size="mini" class="itemBtn">6</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="第七项"
                  placement="top-start"
                >
                  <el-button size="mini" class="itemBtn">7</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="第八项"
                  placement="top-start"
                >
                  <el-button size="mini" class="itemBtn">8</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="第九项"
                  placement="top-start"
                >
                  <el-button size="mini" class="itemBtn checkBtn">9</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="第十项"
                  placement="top-start"
                >
                  <el-button size="mini" class="itemBtn checkBtn">10</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="第十一项"
                  placement="top-start"
                >
                  <el-button size="mini" class="itemBtn checkBtn">11</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="第十二项"
                  placement="top-start"
                >
                  <el-button size="mini" class="itemBtn checkBtn">12</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="第十三项"
                  placement="top-start"
                >
                  <el-button size="mini" class="itemBtn checkBtn">13</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="第十四项"
                  placement="top-start"
                >
                  <el-button size="mini" class="itemBtn checkBtn">14</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="第十五项"
                  placement="top-start"
                >
                  <el-button size="mini" class="itemBtn checkingBtn"
                    >15</el-button
                  >
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="第十六项"
                  placement="top-start"
                >
                  <el-button size="mini" class="itemBtn checkBtn">16</el-button>
                </el-tooltip>
              </el-col>
            </el-col>
          </el-row>
        </el-col>
        <el-col :xl="20" :lg="18" :md="16" :sm="17" class="checkInfo">
          <div class="itemTitle">
            <h4>
              15、落实由政府负责人担任召集人的工作协调机制，定期召开会议研究会商根治欠薪工作
            </h4>
            <p>
              评价标准：落实由政府负责人担任召集人的工作协调机制，定期召开会议研究会商根治欠薪工作
            </p>
          </div>
          <el-table :data="tableList" border style="width: 100%">
            <el-table-column
              prop="scale"
              label="评分标准"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="score"
              label="自评得分"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="exeam"
              label="考核评定"
              align="center"
            ></el-table-column>
          </el-table>
          <el-row>
            <el-form
              :model="formData"
              :rules="formRules"
              ref="formData"
              class="formData"
            >
              <el-form-item
                prop="score"
                label="自评得分："
                class="row-padding-bottom"
                :style="{ width: '200px' }"
              >
                <el-input
                  type="text"
                  placeholder="请输入"
                  v-model="formData.score"
                  :style="{ width: '90%' }"
                ></el-input
                >&nbsp;分
              </el-form-item>
              <el-form-item
                prop="explain"
                label="自评说明："
                class="row-padding-bottom"
              >
                <el-input
                  type="textarea"
                  placeholder="请输入详细评价说明"
                  v-model="formData.explain"
                ></el-input>
              </el-form-item>
              <el-form-item label="自评支持材料：" class="content">
                <el-row>
                  <el-col :span="24">
                    <uploadAnnex
                      @getFileList="getFileList"
                      :limitationFactor="limitationFactor"
                      @getFile="getFile"
                      :upLoadFile="upLoadFile"
                    />
                    <ul class="upLoadFile">
                      <li v-for="(item, index) of upLoadFile" :key="index">
                        <i class="icon iconfont iconfujian"></i>
                        {{ item.name }}
                        <span class="del" @click="delFile(index)">删除</span>
                      </li>
                    </ul>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="saveBtn" @click="saveInfo"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </el-row>
          <el-row class="upToNextBtn">
            <el-button type="primary">上一项</el-button>
            <el-button type="primary">下一项</el-button>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import uploadInput from '@/components/publicCom/uploadInput.vue'

export default {
  name: 'selfEvalutionResult',

  data() {
    return {
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        messagetip:
          '仅支持上传doc、docx、xls、xlsx、txt、rar、zip、jpg、png、pdf格式文件', //自定义报错提示语
        formatType: '', //自定义上传格式校验类型
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        methodTip:
          '仅支持上传doc、docx、xls、xlsx、txt、rar、zip、jpg、png、pdf格式文件', //自定义上传文件提示
        uploadBtnType: 'typeThree', //自定义上传按钮类型
      },
      isCheck: false,
      isChecking: false, //正在被考核项
      //表格数据
      tableList: [{ scale: '0.5', score: '--', exeam: '--' }],
      formData: {
        score: '',
        explain: '',
        fileList: [],
      },
      upLoadFile: [],
      uploadUrl: 'api-f/files/upload',
      formRules: {
        score: [
          {
            required: true,
            message: '评分不能为空',
            trigger: 'blur',
          },
        ],
        explain: [
          {
            required: true,
            message: '自评说明不能为空',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  components: {
    uploadInput,
  },
  methods: {
    /**
     * @description: 获取上传的附件
     */
    getFileList(val) {
      this.managerOldSrcList = val.oldSrcList
      this.managerSrcList = val.srcList
    },
    /**
     * @description: 获取上传的附件
     */
    getFile(val) {
      this.upLoadFile = val
    },
    goBack() {},
    delFile(index) {
      this.upLoadFile.splice(index, 1)
    },
    // 获取子组件上传成功后的值
    getData(data) {
      this.upLoadFile.push(data)
    },
    successCallBack() {},
    errorCallBack() {},
    saveInfo() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
.mainColor {
  color: #009588;
  font-size: 16px;
  font-weight: bold;
}

.topTitle {
  background-color: #fff;
  border-bottom: 1px solid #e3e7e9;
  height: 94px;
  padding: 24px 0 24px 24px;
  font-family: 'Microsoft YaHei';
  font-size: 18px;
  font-weight: bold;
  vertical-align: middle;
  .leftBox {
    color: #333;
    .explain {
      padding: 5px 0 0 16px;
      line-height: 20px;
      font-size: 14px;
      font-weight: normal;
      color: #999;
      span {
        color: #333;
        b {
          color: #ff0000;
        }
      }
    }
  }
  .rightBox {
    text-align: center;
    h3 {
      color: #333;
      font-size: 16px;
    }
  }
}

.mainCon {
  padding-left: 24px;
  padding-right: 24px;
  height: calc(100% - 94px);
  overflow-y: auto;
  .checkItems {
    border-right: 2px dashed #ebeef5;
    font-size: 14px;
    .itemBox {
      margin-top: 20px;
      .itemBtn {
        width: 45px;
        height: 40px;
        margin-bottom: 10px;
        background: #f5f5f5;
        color: #333;
        font-size: 14px;
      }
    }
  }
  .checkInfo {
    padding-left: 40px;
    color: #333;
    font-size: 14px;
    .itemTitle {
      margin-bottom: 20px;
      p {
        margin-left: 25px;
        font-size: 14px;
        color: #999;
      }
    }
    .formData {
      margin-top: 40px;

      // 上传附件
      .upLoadBox {
        position: relative;
        .upLoadDom {
          position: absolute;
          top: -24px;
          left: 0;
          opacity: 0;
          /deep/ #salaryExcelForm {
            line-height: 36px;
          }
          /deep/ #salaryExcel {
            width: 136px;
            height: 36px;
          }
          &:hover {
            cursor: pointer;
          }
        }
        .uploadImgState {
          font-size: 14px;
          color: #999999;
          margin-left: 12px;
        }
        .upload {
          width: 96px;
          height: 36px;
          color: #009588;
        }
      }

      .upLoadFile {
        margin-top: 10px;
        color: #333;
        line-height: 21px;
        li {
          margin-bottom: 10px;
          i {
            color: #999;
            margin: 0 5px 0 15px;
          }
          .del {
            font-size: 14px;
            color: #db0202;
            margin-left: 20px;
            cursor: pointer;
          }
        }
      }
    }
    .upToNextBtn {
      float: right;
      .el-button {
        background-color: #fff;
        color: #009588;
        border: 1px solid #009588;
      }
    }
  }
}

.nav ul {
  list-style: none;
}

.nav li {
  display: block;
  float: left;
}
/deep/ .el-dialog__footer {
  background: #fff;
  padding-bottom: 70px;
}
/deep/ .el-input {
  width: 95%;
}
.saveBtn {
  padding: 10px 20px;
  background-color: #009588;
  border-color: #009588;
  color: #fff;
}

//已考核
.checkBtn {
  background: #009588 !important;
  color: #fff !important;
}
.checkingBtn {
  background: #999 !important;
  color: #fff !important;
}
</style>
